<template>
  <div class="goods_list_box">
    <div
      v-for="item in state.list"
      :key="item.goodsId"
      class="goods_list_item"
      @click="handNavDetails(item.goodsId)"
    >
      <!-- <van-image width="50%" height="auto" :src="item.goodsCoverImg" /> -->
      <img :src="item.goodsCoverImg" alt="" />
      <div class="item_tag">
        <van-tag type="success">{{ item.tag }}</van-tag>
      </div>
      <div class="title">
        {{ item.goodsName }}
      </div>
      <div class="intro">{{ item.goodsIntro }}</div>
      <div class="price">￥{{ item.sellingPrice }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watchEffect } from "vue";
interface PropsObj {
  goodsCoverImg: string;
  goodsIntro: string;
  goodsName: string;
  tag: string;
  goodsId: number;
  sellingPrice: number;
}
export default defineComponent({
  name: "GoodsList",
  props: {
    list: {
      type: Array as PropType<Array<PropsObj>>,
      default: () => {
        return [];
      },
    },
  },
  setup(props, ctx) {
    function handNavDetails(id: string) {
      ctx.emit("handnavdetails", id);
    }
    watchEffect(() => {
      props.list.forEach((item) => {
        if (item.goodsCoverImg.startsWith("https")) {
          return;
        } else {
          item.goodsCoverImg = `http://47.99.134.126:28019${item.goodsCoverImg}`;
        }
      });
    });
    // 不要尝试去解构props，因为这样会让props失去响应式
    const state = reactive(toRefs(props));
    return { state, handNavDetails };
  },
});
</script>
<style lang="scss" scoped>
.goods_list_box {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  .goods_list_item {
    width: 50%;
    box-sizing: border-box;
    width: 50%;
    border-bottom: 1px solid #e9e9e9;
    padding: 20px 20px;
    position: relative;
    .item_tag {
      position: absolute;
      top: 8px;
      left: 10px;
    }
    .title {
      font-size: 16px;
      @include ellipsis();
    }
    .intro {
      font-size: 14px;
      @include ellipsis();
    }
    .price {
      color: $themeColor;
      font-size: 16px;
    }

    &:nth-child(2n + 1) {
      border-right: 1px solid #e9e9e9;
    }
    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
